<template>
  <div class="conMain" >
    <el-card  class="box-card" >
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form :inline="true" size="small" label-width="120px">
            <el-row>
              <el-col :span="24">
              <el-form-item label="创建时间：">
                <!-- <el-radio-group
                  v-model="params.date"
                  type="button"
                  class="mr20"
                  size="small"
                  @change="selectChange()"
                >
                  <el-radio-button
                    v-for="(item,i) in fromList.fromTxt"
                    :key="i"
                    :label="item.val"
                  >{{ item.text }}</el-radio-button>
                </el-radio-group> -->
                <el-date-picker
                  v-model="params.s_createtime"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  size="small"
                  type="daterange"
                  placement="bottom-end"
                  placeholder="自定义时间"
                  style="width: 250px;"
                  @change="onchangeTime"
                />
              </el-form-item>
              </el-col>
              <el-col :span="24">
              <el-form-item label="订单状态：">
                <el-radio-group v-model="params.s_status" type="button" @change="getList(1)">
                  <el-radio-button label="">全部 </el-radio-button>
                  <el-radio-button  label="1">待处理 </el-radio-button>
                  <el-radio-button  label="2">已处理 </el-radio-button>
                </el-radio-group>
              </el-form-item>
               </el-col>
                <el-col :span="24">
              <el-form-item label="sn">
                  <el-input clearable v-model="params['s_order*sn']"  placeholder="请输入订单编号" />
              </el-form-item>
              <el-form-item label="代理姓名">
                  <el-input clearable v-model="params['s_agent*name']"  placeholder="请输入代理姓名" />
              </el-form-item>
              <el-form-item label="管理员姓名">
                  <el-input clearable v-model="params['s_admin*nickname']"  placeholder="请输入管理员昵称" />
              </el-form-item>
              <el-form-item label=" ">
                <el-button type="primary"  size="small" class="searchBtn" @click="handleSearch" icon='el-icon-search'>搜索</el-button>
                <el-button type="info"  @click="handleRet" plain>重置</el-button>
              </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="text-align: right;">
            <!-- <el-button v-has="'spread/youku/finish'"  type="warning" size="small" class="ml10" @click="finish" plain><i class="el-icon-circle-check" /> 导入完成</el-button>
            <el-button v-has="'spread/youku/export'"  type="primary" size="small" class="ml10" @click="down" plain><i class="el-icon-download" /> 批量导出</el-button> -->
          </div>
        </div>

      </div>
      <el-table v-loading="loading"  :data="list" style="width: 100%" :empty-text='emtypetxt'>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-row>
              <el-col :span="6">
                订单编号：{{ props.row.order.sn }}
              </el-col>
               <el-col :span="6">
                异常描述：{{ props.row.order.status_msg }}
              </el-col>
              <el-col :span="6">
                订购号码：{{ props.row.order.phone }}
              </el-col>
              <el-col :span="6">
                归属地：{{ props.row.order.phone_province }}-{{ props.row.order.phone_city }}
              </el-col>
              <el-col :span="6">
                姓名：{{ props.row.order.name }}
              </el-col>
              <el-col :span="6">
                身份证号: {{ props.row.order.card }}
              </el-col>
              <el-col :span="6">
                收货号码：{{ props.row.order.post_mobile }}
              </el-col>
              <el-col :span="6">
                收货地址：{{ props.row.order.post_province }}-{{ props.row.order.post_city }}-{{ props.row.order.post_district }}
              </el-col>
              <el-col :span="6">
                商品id：{{ props.row.order.goods_id }}
              </el-col>
               <el-col :span="6">
                商品名称：{{ props.row.goods_name }}
              </el-col>
              <el-col :span="6">
                渠道id：{{ props.row.order.pass_id }}
              </el-col>
               <el-col :span="6">
                渠道名称：{{ props.row.pass_name }}
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px;">
            
            </el-row>
    
          </template>
        </el-table-column>
          <el-table-column prop="id" label="ID" align="center" :show-overflow-tooltip="true" width='100' />
          <el-table-column prop="order.sn" label="订单" align="center"  :show-overflow-tooltip="true" />
          <el-table-column prop="agent.name" label="代理姓名" align="center"  :show-overflow-tooltip="true"/>
          <el-table-column prop="admin.nickname" label="所属管理" align="center"  :show-overflow-tooltip="true"/>
          <el-table-column label="类型" align="center"  >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type === 1" type="info" size="mini" disable-transitions>已充值订单未同步</el-tag>
              <el-tag v-if="scope.row.type === 3" type="info" size="mini" disable-transitions>已竣工宽带未同步</el-tag>
              <el-tag v-if="scope.row.type === 4" type="info" size="mini" disable-transitions>大流量卡查询物流单号</el-tag>
              <el-tag v-else-if="scope.row.type === 2" type="info" size="mini" disable-transitions>失败单已开出</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center"  >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 1" type="info" size="mini" disable-transitions>待处理</el-tag>
              <el-tag v-else-if="scope.row.status === 2" type="success" size="mini" disable-transitions>已处理</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="msg_reason" label="原因" align="center"  :show-overflow-tooltip="true"/>
          <el-table-column prop="img" label="截图" align="center">
					<template slot-scope="scope">
						<el-image style="width:40px;height:40px" :src="scope.row.img"
							:preview-src-list="[scope.row.img]">
							<div slot="error" class="image-slot" />
						</el-image>
					</template>
				</el-table-column>
          <el-table-column prop="msg_result" label="处理结果" align="center"  :show-overflow-tooltip="true"/>

          <el-table-column prop="order.createtime" label="下单时间" align="center" width="160" />
          <el-table-column prop="createtime" label="上传时间" align="center" width="160" />
          <el-table-column fixed="right" label="操作" align="center" >
            <template slot-scope="scope" >
                <el-link :underline="false" type="primary" title='成功' @click="dispose(scope.row)" class='ml10'>处理</el-link>
            </template>
          </el-table-column>
      </el-table>
      <div class="pagination">
          <el-pagination
            :current-page="params.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="params.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
      </div>
    </el-card>
      <el-dialog :title="'处理'"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    center  width="40%">
      <el-form ref="ruleForm" :model="sub" label-width="110px">
        <el-form-item label="订单SN" >
          <el-input v-model="sub.sn"  disabled clearable placeholder="" />
        </el-form-item>
        <el-form-item label="代理名称" prop="name">
          <el-input  disabled v-model="sub.name" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="类型" prop="type" >
            <el-radio-group disabled v-model="sub.type" >
              <el-radio label="1">结算异常</el-radio>
              <el-radio label="2">其他</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="补充原因" prop="memo">
          <el-input type="textarea" disabled v-model="sub.msg_reason"></el-input>
        </el-form-item>
        <el-form-item label="处理结果" prop="memo">
          <el-input type="textarea" v-model="sub.msg_result"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" >
            <el-radio-group v-model="sub.status" >
              <el-radio label="1">待处理</el-radio>
              <el-radio label="2">已处理</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subForm('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { issue_index,issue_dispose} from  '@/api/order'
  import { general_upload} from  '@/api/attach'
  import { fromList } from '@/libs/select.js'

  export default {
    data() {
      return {
        dialogVisible:false,
        total:0,
        loading:true,
        emtypetxt:'',
        list: [],
        fromList: fromList,
        params: {
          s_status:'',
          date:'all',
          s_createtime:[],
          s_phone:'',
          's_order*sn':'',
          's_agent*name':'',
          's_admin*nickname':'',
          ss_createtime:'BETWEEN',
          page: 1,
          pagesize:10,
        },
        sub:{
          file:'',
        },
        fileList: [],//上传的文件

      }
    },
    created() {

      this.getList()
    },
    methods: {
      getList(page) {
        this.params.page = page?page:this.params.page;
        this.emtypetxt='加载中...';
        this.loading=true;
        issue_index(this.params).then(res => {
          this.list=res.data.list
          this.total=res.data.total
          this.loading = false
          if(this.list.length==0){
            this.emtypetxt='暂无数据'
          }
        })
      },
      // 时间筛选
      selectChange(tab) {
        this.params.s_createtime= [];
        this.getList(1);
      },
      onchangeTime(e) {
        this.params.date = 'all';
        this.params.s_createtime = e;
        this.getList(1);
      },
      handleSearch(){
        this.getList(1)
      },
      //分页
      handleSizeChange(val) {
          this.params.pagesize = val
          this.getList(1)
      },
      handleCurrentChange(val) {
          this.params.page = val
          this.getList()
      },
      handleRet(){
        this.params={
          s_status:'',
          date:'all',
          s_createtime:[],
          s_phone:'',
          's_agent*name':'',
          ss_createtime:'BETWEEN',
          page: 1,
          pagesize:10,
        }
        this.goodslist=[]
        this.getList()
      },
      //上传文件开始
      handleExceed(files, fileList) {
        this.$message.warning(`每次只能上传1个文件`);
      },
      handleRemove(file, fileList) {
          this.sub.file=''
      },
      beforeUpload (file) {
        if(file.size>1024*1024*5){
          this.$message.warning('文件不能大于5M')
          return false;
        }
        const isText = file.type === 'application/vnd.ms-excel';
        const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isText && !isTextComputer) {
          this.$message.warning('请上传excel格式文件！');
        };
        return (isText || isTextComputer);
      },
      finish(){
        this.dialogVisible=true
        this.sub.file=''
        this.fileList=[]
      },
      subForm(){
        issue_dispose(this.sub).then(res => {
          if(res.code==9){
            this.$message.error(res.msg);
          }else{
            this.$message.success(res.msg);
            this.getList()
            this.dialogVisible=false
          }

        })
      },
      uploadExcel (item) {
        const sub = new FormData();
        sub.append('file',item.file);
        general_upload(sub).then(res => {
          this.$message.success('上传成功');
          this.sub.file=res.data.fullurl
        })
      },
      //上传文件结束
      dispose(row) {
        this.sub={
          id:row.id,
          sn:row.order.sn,
          name:row.agent.name,
          type:row.type+'',
          status:row.status+'',
          msg_reason:row.msg_reason+'',
          msg_result:row.msg_result+'',
        }
        this.dialogVisible=true
    },

      seterror(id){
        let _this=this;
        _this.$modalSure('您确定要设置该【订单失败】嘛？').then(() => {
          youku_seterror({id:id}).then(res => {
            _this.$message.success(res.msg)
            _this.getList()
          })
        })
      },
      seeMb(){
        window.open('/uploads/demo_yk.jpg');
      },
      down(){
        const loading = this.$loading({
            lock: true,
            text: '正在导出...',
            spinner: 'el-icon-loading',
            background: 'rgba(20, 20, 20, 0.7)'
        });
        youku_export(this.params).then(res => {
          const { export_json_to_excel } = require('../../assets/js/Export2Excel');
          const tHeader = res.data.header;
          const filterVal =res.data.filter;
          const list = res.data.list;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data,res.data.ename);
          loading.close();
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
    },
  }
</script>

<style>
  .el-upload__tip{
    color:#afafaf;
  }
</style>
